<template>
  <!-- 检索 -->
  <div class="search">
    <div class="search-left">
      <p>请输入检索词：</p>
      <el-input v-model="input" placeholder="请输入检索词" :clearable="true" />
    </div>
    <div class="search-right">
      <!-- 插槽，可自行添加按钮 -->
      <slot name="searchButton" />

      <el-button type="primary" @click="_query">查询</el-button>
      <el-button @click="_reset">重置</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 搜索
      input: ''
    }
  },
  methods: {
    // 检索事件
    // 查询
    _query() {
      console.log('查询', this.input)
    },
    // 重置
    _reset() {
      console.log('重置按钮，调用数据接口')
      this.$parent._listData()
    }
  }
}
</script>

<style lang='scss' scoped>
// 搜索
.search {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #efefef;
  padding: 20px 0;
  .search-left {
    display: flex;
    align-items: center;
    p {
      white-space: nowrap;
    }
  }
  ::v-deep.el-input__inner {
    width: 250px;
  }
}
</style>
